<template>
  <div class="login-bg">
    <canvas ref="bgCanvas" class="bg-canvas" />
    <div class="login-form-wrapper">
      <div class="login-title">
        <img src="@/assets/wu-nai.svg" alt="logo" class="logo" />
        <h2>武耐财务管理系统</h2>
      </div>
      <a-form :model="form" :rules="rules" class="login-form" @submit.prevent="onSubmit">
        <a-form-item name="username">
          <a-input v-model:value="form.username" size="large" placeholder="用户名" />
        </a-form-item>
        <a-form-item name="password">
          <a-input-password v-model:value="form.password" size="large" placeholder="密码" />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit" size="large" block :loading="loading">
            登录
          </a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script setup>
import useMenuTreeStore from '@/store/menuTree'
import { message } from 'ant-design-vue'

const form = reactive({
  username: '',
  password: '',
  code: '0312',
})

const rules = {
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
}

const router = useRouter()

const loading = ref(false)

// 测试登录
function testLogin() {
  return [
    {
      id: '0fb24f34g423da7o4a2024338b90b08b',
      icon: 'icon-ziyuanxhdpi',
      isFrame: 0,
      menuName: '系统管理',
      parentId: '',
      path: '/system',
      component: '',
      sort: 0,
      status: 0,
      type: 'M',
      children: [
        {
          id: '024338b90b08b',
          icon: 'icon-ziyuanxhdpi',
          isFrame: 0,
          menuName: '菜单管理',
          parentId: '0fb24f34g423da7o4a2024338b90b08b',
          path: '/system/menu',
          component: '/system/menu/index',
          sort: 0,
          status: 0,
          type: 'C',
          children: null,
        },
        {
          id: '024338b90b082232',
          icon: 'icon-ziyuanxhdpi',
          isFrame: 0,
          menuName: '账号管理',
          parentId: '0fb24f34g423da7o4a2024338b90b08b',
          path: '/system/account',
          component: '/system/account/index',
          sort: 1,
          status: 0,
          type: 'C',
          children: null,
        },
      ],
    },
    {
      id: '0fb24f34g423da7o4a2024338123efrg',
      icon: 'icon-ziyuanxhdpi',
      isFrame: 0,
      menuName: '收发存货管理',
      parentId: '',
      path: '/dispatch',
      component: '',
      sort: 0,
      status: 0,
      type: 'M',
      children: [
        {
          id: '024338123efrg111',
          icon: 'icon-ziyuanxhdpi',
          isFrame: 0,
          menuName: '入库明细',
          parentId: '0fb24f34g423da7o4a2024338123efrg',
          path: '/dispatch/instorage',
          component: '/dispatch/instorage/index',
          sort: 0,
          status: 0,
          type: 'C',
          children: null,
        },
        {
          id: '024338123efrg222',
          icon: 'icon-ziyuanxhdpi',
          isFrame: 0,
          menuName: '原料出库',
          parentId: '0fb24f34g423da7o4a2024338123efrg',
          path: '/dispatch/outstorage',
          component: '/dispatch/outstorage/index',
          sort: 1,
          status: 0,
          type: 'C',
          children: null,
        },
      ],
    },
  ]
}

function onSubmit() {
  if (!form.username || !form.password) {
    message.error('请填写完整信息')
    return
  }
  loading.value = true
  sessionStorage.setItem('token', 'dffdksfjdskfdsfkdsfds')
  useMenuTreeStore()
    .setMenuList(testLogin())
    .then(() => {
      setTimeout(() => {
        // 重定向到首页
        router.replace('/home')
      }, 500)
      message.success('登录成功')
      loading.value = false
    })

  // httpRequest('/admin/login', form).then((res) => {
  //   message.success('登录成功')
  //   sessionStorage.setItem('token', res.token)
  //   JSON.stringify(res.account)
  //   sessionStorage.setItem('sysUser', JSON.stringify(res.user))
  //   sessionStorage.setItem('roles', JSON.stringify(res.roles))
  //   // useMenuTreeStore().setMenuList(res.menuList)
  //   useMenuTreeStore().setMenuList(testLogin())
  //   setTimeout(() => {
  //     // 重定向到首页

  //     router.push('/home')
  //   }, 500)
  // }).catch(() => {
  //   loading.value = false
  // })
}

// 科技感粒子连线动画
const bgCanvas = ref(null)

onMounted(() => {
  const canvas = bgCanvas.value
  if (!canvas) {
    return
  }
  const ctx = canvas.getContext('2d')
  let width = window.innerWidth
  let height = window.innerHeight
  canvas.width = width
  canvas.height = height

  // 粒子参数
  const particleCount = 60
  const particles = Array.from({ length: particleCount }, () => ({
    x: Math.random() * width,
    y: Math.random() * height,
    r: 2 + Math.random() * 2,
    dx: (Math.random() - 0.5) * 1.2,
    dy: (Math.random() - 0.5) * 1.2,
    color: `rgba(0,198,255,${0.7 + Math.random() * 0.3})`,
  }))

  function drawBg() {
    // 深色科技渐变背景
    const gradient = ctx.createLinearGradient(0, 0, width, height)
    gradient.addColorStop(0, '#0f2027')
    gradient.addColorStop(0.5, '#2c5364')
    gradient.addColorStop(1, '#00c6ff')
    ctx.fillStyle = gradient
    ctx.fillRect(0, 0, width, height)
  }

  function draw() {
    drawBg()
    // 画粒子
    particles.forEach(p => {
      ctx.beginPath()
      ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2)
      ctx.fillStyle = p.color
      ctx.shadowColor = '#00c6ff'
      ctx.shadowBlur = 12
      ctx.fill()
      ctx.closePath()
    })
    // 画连线
    for (let i = 0; i < particles.length; i++) {
      for (let j = i + 1; j < particles.length; j++) {
        const dx = particles[i].x - particles[j].x
        const dy = particles[i].y - particles[j].y
        const dist = Math.sqrt(dx * dx + dy * dy)
        if (dist < 120) {
          ctx.beginPath()
          ctx.moveTo(particles[i].x, particles[i].y)
          ctx.lineTo(particles[j].x, particles[j].y)
          ctx.strokeStyle = `rgba(0,198,255,${0.12 + (1 - dist / 120) * 0.18})`
          ctx.lineWidth = 1
          ctx.shadowBlur = 0
          ctx.stroke()
          ctx.closePath()
        }
      }
    }
  }

  function animate() {
    draw()
    particles.forEach(p => {
      p.x += p.dx
      p.y += p.dy
      if (p.x < 0 || p.x > width) {
        p.dx *= -1
      }
      if (p.y < 0 || p.y > height) {
        p.dy *= -1
      }
    })
    requestAnimationFrame(animate)
  }

  animate()
  window.addEventListener('resize', () => {
    width = window.innerWidth
    height = window.innerHeight
    canvas.width = width
    canvas.height = height
  })
})
</script>

<style scoped>
.login-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.bg-canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100vw;
  height: 100vh;
}

.login-form-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 340px;
  padding: 48px 36px 32px;
  background: rgb(20 30 50 / 55%);
  backdrop-filter: blur(12px);
  border: 1.5px solid rgb(0 198 255 / 18%);
  border-radius: 18px;
  box-shadow: 0 8px 32px 0 rgb(0 198 255 / 18%);
  transform: translate(-50%, -50%);
}

.login-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 32px;
}

.logo {
  width: 56px;
  height: 56px;
  margin-bottom: 12px;
  filter: drop-shadow(0 0 8px #00c6ff44);
}

.login-form {
  width: 100%;
}

.a-input,
.a-input-password {
  color: #fff;
  background: rgb(255 255 255 / 8%);
  border: 1.5px solid #00c6ff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgb(0 198 255 / 8%);
  transition:
    border 0.3s,
    box-shadow 0.3s;
}

.a-input:focus,
.a-input-password:focus {
  border: 1.5px solid #00eaff;
  box-shadow: 0 0 12px #00eaff88;
}

.a-button {
  position: relative;
  overflow: hidden;
  font-weight: bold;
  color: #fff !important;
  letter-spacing: 1px;
  background: linear-gradient(90deg, #00c6ff 0%, #0072ff 100%) !important;
  border: none !important;
  border-radius: 8px;
  box-shadow: 0 2px 16px #00c6ff44;
  transition:
    background 0.3s,
    box-shadow 0.3s;
}

.a-button::after {
  position: absolute;
  top: 0;
  left: -60%;
  width: 60%;
  height: 100%;
  content: '';
  background: linear-gradient(120deg, rgb(255 255 255 / 18%) 0%, rgb(255 255 255 / 8%) 100%);
  transition: left 0.5s;
  transform: skewX(-20deg);
}

.a-button:hover::after {
  left: 110%;
}

.a-button:hover,
.a-button:focus {
  color: #fff !important;
  background: linear-gradient(90deg, #0072ff 0%, #00c6ff 100%) !important;
  box-shadow: 0 4px 24px #00eaff66;
}

.a-button:active {
  background: linear-gradient(90deg, #00c6ff 0%, #0072ff 100%) !important;
}
</style>
